<template>
  <div class="content_panel project_modules">
    <div class="content_panel_top">
      <h3 class="panel_title">
        <span>{{$t('pageTitle.allCheck')}}</span>
      </h3>
      <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="" prop="orderNid"><!--内部订单号-->
              <el-input :placeholder="$t('common.innerOrderId')" v-model="form.orderNid" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="phone"><!--手机号-->
              <el-input :placeholder="$t('common.mobileNumber')" v-model="form.phone" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="borrowTime" ><!--申请时间-->
              <el-date-picker
                      v-model="form.borrowTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.applyStartTime')"
                      :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="8">
            <el-form-item prop="assignTime" label=""><!--分派时间-->
              <el-date-picker
                      v-model="form.assignTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.dispatchStartTime')"
                      :end-placeholder="$t('common.dispatchEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="cardId"><!--身份证号-->
              <el-input :placeholder="$t('common.identityNumber')" v-model="form.cardId" type="text"></el-input>
            </el-form-item>
          </el-col>
            <!--telVerifying: '电核中',-->
            <!--telPass: '电核通过',-->
            <!--telRefuse: '电核拒绝',-->
          <el-col :span="8">
            <el-form-item prop="checkStatus" label="">
              <el-select v-model="form.checkStatus" clearable :placeholder="$t('tel.telStatus')" style="width: 100%;">
                <el-option key="0" value="0" :label="$t('pageTitle.waitAssign')"></el-option> <!--待分派-->
                <el-option key="1" value="1" :label="$t('pageTitle.telVerifying')"></el-option> <!--电核中-->
                <el-option key="2" value="2" :label="$t('pageTitle.telPass')"></el-option> <!--电核通过-->
                <el-option key="3" value="3" :label="$t('pageTitle.telRefuse')"></el-option> <!--电核拒绝-->
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
        <el-row>
          <!--return that.$t('common.newUser');// 新户-->
          <!--case 1:-->
          <!--return that.$t('common.secNewUser');// 次新户-->
          <!--case 2:-->
          <!--return that.$t('common.oldUser');// 老户-->
          <el-col :span="8">
            <el-form-item prop="userType" label=""> <!--用户类型-->
              <el-select v-model="form.userType" clearable :placeholder="$t('common.userType')" style="width: 100%;" >
                <el-option key="0" value="0" :label="$t('common.newUser')"></el-option> <!--新户-->
                <el-option key="1" value="1" :label="$t('common.secNewUser')"></el-option> <!--次新户-->
                <el-option key="2" value="2" :label="$t('common.oldUser')"></el-option> <!--老户-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="checkTime" ><!--进件时间-->
              <el-date-picker
                      v-model="form.checkTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.incomeStartTime')"
                      :end-placeholder="$t('common.incomeEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="lastVerifyTime" ><!--最后跟进时间-->
              <el-date-picker
                      v-model="form.lastVerifyTime"
                      style="width: 100%"
                      align="right"
                      type="datetimerange"
                      :editable="false"
                      range-separator="-"
                      :start-placeholder="$t('common.lastFollowStartTime')"
                      :end-placeholder="$t('common.lastFollowEndTime')"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item prop="operPeopleName"><!--操作人员-->
              <el-input :placeholder="$t('tel.operationStaff')" v-model="form.operPeopleName" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="team"><!--所属小组-->
              <el-select v-model="form.team" :placeholder="$t('tel.group')" style="width: 100%;">
                <el-option v-for="opt in groupList" :label="opt.userName" :key="opt.userName" :value="opt.userName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="reason" class="reason"><!--原因-->
              <el-select v-model="form.reason" :placeholder="$t('common.reason')" style="width: 100%;">
                <el-option v-for="item in reasonList" :key="item.reasonCode" :value="item.reasonCode" :label="item.resonCodeReturn + '-' + item.reasonCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-button @click="search" type="primary">{{$t('common.search')}}</el-button>
            <el-button @click="clear" type="primary">{{$t('common.clear')}}</el-button>
            <el-button @click="exportData" type="primary">{{$t('common.export')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--全局查看-->
    <div class="module_content">
      <div class="content_panel project_modules">
        <div class="table_list">
          <el-table :max-height="tableMaxHeight" :data="tableData" style="width: 100%;">
            <el-table-column prop="userName" :label="$t('common.name')" min-width="110"></el-table-column><!--姓名-->
            <el-table-column prop="userId" label="User ID" min-width="80"></el-table-column>
            <el-table-column prop="cardId" :label="$t('common.identityNumber')" min-width="150"><!--身份证号-->
              <template slot-scope="scope">
                <a @click="goDetail(scope.row)" type="text" size="small" v-if="scope.row.cardId" href="javascript:void(0);">{{ scope.row.cardId }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130"></el-table-column><!--手机号码-->
            <el-table-column prop="userType" :label="$t('common.userType')" min-width="100"><!--用户类型-->
              <template slot-scope="scope">
                <span :class="scope.row.userType==2?'txt_red':''">
                  {{ scope.row.userType | switchUserType }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="orderNid" :label="$t('common.innerOrderId')" width="200"></el-table-column><!--内部订单号-->
            <el-table-column prop="borrowTime" :label="$t('common.applyDate')" min-width="160"><!--申请时间-->
              <template slot-scope="scope">{{ scope.row.borrowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column prop="checkTime" :label="$t('tel.incomingTime')" min-width="160">
              <template slot-scope="scope">{{ scope.row.checkTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column prop="assignTime" :label="$t('tel.timeDispatch')" min-width="160">
              <template slot-scope="scope">{{ scope.row.assignTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column prop="lastVerifyTime" :label="$t('tel.lastFollowTime')" min-width="160"><!--最后跟进时间-->
              <template slot-scope="scope">{{ scope.row.lastVerifyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column prop="checkStatus" :label="$t('tel.telStatus')" min-width="100"><!--电核状态-->
              <template slot-scope="scope">{{ scope.row.checkStatus | switchTelStatus }}</template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" :label="$t('common.reason')" min-width="300"><!--原因-->
              <template slot-scope="scope">
                <span v-for="item in scope.row.rciList" :key="item.reasonCode">{{ item.resonCodeReturn + '-' + item.reasonCode+"; " }}</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="remark" :label="$t('common.remark')" min-width="300"><!--备注-->
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="operPeopleName" :label="$t('tel.operationStaff')" min-width="100"></el-table-column><!--操作人员-->
            <el-table-column prop="team" :label="$t('tel.group')" min-width="120"></el-table-column><!--所属小组-->
          </el-table>
        </div>
        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

      </div>
    </div>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';
  import { apiConf } from '@/config/';
  import urlType from '@/api/url-type';
  import urlUtils from '@/libs/urlutils';
  import storage from '@/libs/storage';

  let that = null;
  export default {
    name: 'telOverall',
    components: {
      Pagination
    },
    mixins: [mixin],
    data() {
      return {
        form: {
          orderNid: '',
          phone: '',
          cardId: '',
          operPeopleName: '',
          checkStatus: '',
          userType: '',
          reason: '',
          team: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
          assignTime: '',
          assignTimeStart: '',
          assignTimeEnd: '',
          lastVerifyTime: '',
          lastVerifyTimeStart: '',
          lastVerifyTimeEnd: '',
        },
        groupList: [],
        rules: {
          orderNid: [],
          phone: [],
          cardId: [],
          operPeopleName: [],
          userType: [],
          reason: [],
          team: [],
          borrowTime: [],
          checkTime: [],
          assignTime: [],
          lastVerifyTime: [],
        },
        reasonList: [],
      };
    },
    computed: {
      // showSearch() {
      //   return this.$store.state.app.search.show;
      // }
    },
    methods: {
      getTableData(page = this.page, opts = this.form) {
        const params = {
          type: '-1',
          orderNid: '',
          phone: '',
          cardId: '',
          operPeopleName: '',
          checkStatus: '',
          userType: '',
          reason: '',
          team: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
          assignTime: '',
          assignTimeStart: '',
          assignTimeEnd: '',
          lastVerifyTime: '',
          lastVerifyTimeStart: '',
          lastVerifyTimeEnd: '',
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
          language: storage.getLocal('language'),
        };
        const form = this.form;
        if (typeof form.userType !== 'undefined') {
          params.userType = form.userType;
        }
        if (opts) {
          Object.keys(params).forEach((key) => {
            if (opts[key]) {
              if (typeof opts[key] === 'string') {
                opts[key] = opts[key].trim();
              }
              params[key] = opts[key];
            }
          });
          const day = 0;
          if (opts.borrowTime instanceof Array && opts.borrowTime.length === 2) {
            params.borrowTimeStart = opts.borrowTime[0].getTime();
            params.borrowTimeEnd = opts.borrowTime[1].getTime() + day;
            params.borrowTime = null;
          }
          if (opts.checkTime instanceof Array && opts.checkTime.length === 2) {
            params.checkTimeStart = opts.checkTime[0].getTime();
            params.checkTimeEnd = opts.checkTime[1].getTime() + day;
            params.checkTime = null;
          }
          if (opts.assignTime instanceof Array && opts.assignTime.length === 2) {
            params.assignTimeStart = opts.assignTime[0].getTime();
            params.assignTimeEnd = opts.assignTime[1].getTime() + day;
            params.assignTime = null;
          }
          if (opts.lastVerifyTime instanceof Array && opts.lastVerifyTime.length === 2) {
            params.lastVerifyTimeStart = opts.lastVerifyTime[0].getTime();
            params.lastVerifyTimeEnd = opts.lastVerifyTime[1].getTime() + day;
            params.lastVerifyTime = null;
          }
        }
        this.$api.tel.queryCheckOrder(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.tableData = data.data || [];
            this.page.recordsTotal = data.pageCount;
            this.tableMaxHeight = window.document.body.clientHeight - 180;
          }
        });
      },
      // 获取所有电核小组
      queryTeamList() {
        const params = {
          roleId: 2,
          userName: '',
          leaderId: '',
        };
        this.$api.tel.queryTeamList(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.groupList = data;
          }
        });
      },
      search() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.getTableData({ currentPage: 1 }, this.form);
          } else {
            this.$message.error(this.$t('p2p.plsCheckFilter'));
          }
        });
      },
      clear() {
        this.form = {
          orderNid: '',
          phone: '',
          cardId: '',
          operPeopleName: '',
          checkStatus: '',
          userType: '',
          reason: '',
          team: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTimeStart: '',
          checkTimeEnd: '',
          assignTimeStart: '',
          assignTimeEnd: '',
          lastVerifyTimeStart: '',
          lastVerifyTimeEnd: '',
        };
      },
      goDetail(row) {
        this.$openNewBlank(`#/conf/tel-detail/${row.userId}/${this.$root.local}/${row.orderNid}/${row.checkStatus}/${row.operPeopleId}/${row.userType}`);
      },
      // 获取原因码
      queryAllReasonCode() {
        const params = {
          language: storage.getLocal('language'),
          type: '1',
        };
        this.$api.tel.queryAllReasonCode(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && error === '00000000') {
            this.reasonList = data;
          }
        });
      },
      // excel 导出
      exportData() {
        const params = {
          type: '-1',
          orderNid: '',
          phone: '',
          cardId: '',
          operPeopleName: '',
          checkStatus: '',
          userType: '',
          reason: '',
          team: '',
          borrowTime: '',
          borrowTimeStart: '',
          borrowTimeEnd: '',
          checkTime: '',
          checkTimeStart: '',
          checkTimeEnd: '',
          assignTime: '',
          assignTimeStart: '',
          assignTimeEnd: '',
          lastVerifyTime: '',
          lastVerifyTimeStart: '',
          lastVerifyTimeEnd: '',
        };
        let isNull = true;
        const form = this.form;
        const opts = this.form;
        Object.keys(params).forEach((key) => {
          if (form[key]) {
            params[key] = form[key];
            isNull = false;
          }
        });
        const day = 0;
        if (opts.borrowTime instanceof Array && opts.borrowTime.length === 2) {
          params.borrowTimeStart = opts.borrowTime[0].getTime();
          params.borrowTimeEnd = opts.borrowTime[1].getTime() + day;
          params.borrowTime = null;
        }
        if (opts.checkTime instanceof Array && opts.checkTime.length === 2) {
          params.checkTimeStart = opts.checkTime[0].getTime();
          params.checkTimeEnd = opts.checkTime[1].getTime() + day;
          params.checkTime = null;
        }
        if (opts.assignTime instanceof Array && opts.assignTime.length === 2) {
          params.assignTimeStart = opts.assignTime[0].getTime();
          params.assignTimeEnd = opts.assignTime[1].getTime() + day;
          params.assignTime = null;
        }
        if (opts.lastVerifyTime instanceof Array && opts.lastVerifyTime.length === 2) {
          params.lastVerifyTimeStart = opts.lastVerifyTime[0].getTime();
          params.lastVerifyTimeEnd = opts.lastVerifyTime[1].getTime() + day;
          params.lastVerifyTime = null;
        }
        if (isNull) {
          this.$message.error(this.$t('tel.searchInfo'));
          return;
        }
        const user = storage.get('user');
        const language = storage.getLocal('language');
        params.token = user.token;
        params.language = language;
        let url = apiConf.baseUrl + urlType.tel.getCheckOrder;
        url = urlUtils.fillParams(params, url, []);
        console.log(urlUtils.fillParams(params, url, []));
        window.open(url);
      },
    },
    filters: {
      // 用户类型
      switchUserType(type) {
        switch (+type) {
          case 0:
            return that.$t('common.newUser');
          case 1:
            return that.$t('common.secNewUser');
          case 2:
            return that.$t('common.oldUser');
          default:
            return '';
        }
      },
      // 电核状态
      switchTelStatus(status) {
        switch (status) {
          case '0':
            return that.$t('pageTitle.waitAssign'); // 待分派
          case '1':
            return that.$t('pageTitle.telVerifying'); // 电核中
          case '2':
            return that.$t('pageTitle.telPass'); // 电核通过
          case '3':
            return that.$t('pageTitle.telRefuse'); // 电核拒绝
          default:
            return '';
        }
      },
    },
    created() {
      that = this;
      this.getTableData({ currentPage: this.page.currentPage });
      this.queryTeamList();
      this.queryAllReasonCode();
    },
  };
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
  [data-page=tel-overall]{
    .el-table .cell, .el-table th>.cell{
      word-break: keep-all;
      word-wrap: break-word;
    }
    .el-tooltip__popper{
      max-width: 300px;
      word-break: break-all;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      color: #000;
    }
    .el-date-editor .el-range-separator {
      width: 35px;
    }
    .el-table .red_color {
      color: #FF4949;
    }
    .noteRed {
      color: red;
    }
    .el-col {
      padding-left: 10px;
    }
    .el-table .cell, .el-table th > .cell {
      word-break: keep-all;
      word-wrap: break-word;
    }
    .el-tooltip__popper {
      max-width: 300px;
      word-break: break-all;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      color: #000;
    }
    .el-date-editor .el-range-separator {
      width: 35px;
    }
  }
</style>
